<template>
  <div class="juese3">
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">
      <div class="zhuli" ref="title1" id="section1">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in zuliList" :key="i"
            :class="'animate__animated animate__fadeInUp animate__delay-0' + i * 1 + 's'">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>



      <div class="zhuli" ref="title1" id="section2">
        <div class="startTitle  animate__animated animate__fadeInUp">
          数据驾驶舱
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in jscList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>

      <div class="zhuli" ref="title1" id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          常用功能
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in cygnList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1" id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          信息资讯
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in xinxiList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          name: "智能助理",
          active: true,
        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,
        },
        {
          id: '4',
          name: "常用功能",
          active: false,
        },
        {
          id: '5',
          name: "信息资讯",
          active: false,
        },
      ],
      zuliList: [
        {
          name: '服务方案自动下发',
          content: '利用数据分析和事件模型，为运营者提供最优的服务方案，并自动下发到各个执行角色的工作台的能力。可以根据客流/车流/气象等数据的预测和实时变化，以及运营者的经验和规则，智能地组合各个角色的任务，形成针对性的运营方案。例如，如果预测到明天是周末，客流量会增加三倍，那么服务方案自动下发就会根据这个情况，为餐饮类店铺提供如下建议：多准备食材，增加人员安排，准备更多快捷餐饮等。这样可以提高服务效率，满足客户需求，增加收益。...',
        },

        {
          name: '任务智能反馈',
          content: '运营者需要任务执行情况的实时反馈和评估的能力，智能工作台利用物联设备和数据采集，可以实时收集任务操作者上传的反馈信息，并且通过监控各个执行角色的工作台，收集任务完成情况的数据，并通过可视化展示给运营者。还可以通过对任务执行效果的分析，为运营者提供改进建议和奖惩措施。例如，如果某个餐饮店铺按照服务方案自动下发的建议执行了任务，并且收到了好评和高收入，那么任务智能反馈就会给予该店铺正向的评价和奖励。这样可以提高执行质量，激励执行者，优化运营效果。',
        },
        {
          name: '应急预案智能感知',
          content: '应急预案的智能匹配和下发的能力是运营者非常需要的。使用事件模型和知识链接，可以通过对各种可能发生的紧急事件，如火灾、地震、恐怖袭击等，进行分类和建模，并与后台已经配置好的应急预案进行知识链接。当有紧急事件发生时，可以通过对事件要素的智能感知和分析，如事件类型、严重程度、影响范围等，快速匹配最合适的应急预案，并一键下发到IOC前台系统上。运营者可以在IOC前台系统上，实时联通一线处置的人员，通过可视对讲机实时观察现场情况，并结合各个部门的情况，做出统一调度的动作。例如，如果园区内发生了火灾事件，应急预案智能感知就会根据火灾的位置、规模、扩散速度等要素，匹配出最合适的应急预案，并下发到IOC前台系统上。运营者可以在IOC前台系统上，看到火灾现场的实时画面，并与消防部门、安保部门、医疗部门等进行协调和指挥。这样可以实现应急预案的智能感知和下发，提高紧急事件的处置效率和效果。',
        },
        {
          name: '智能运营事件感知',
          content: '运营相关事件的智能识别和研判的能力通过对多模态的数据采集，如客流、车流、气象、设备等数据，进行分析和处理，并基于运营研判经验，训练事件模型。当有运营相关事件发生时，如客流高峰、车位不足、设备故障等，可以通过对数据变化和异常情况的智能识别和研判，及时通知运营者，并提供决策辅助。例如，如果某个时间段客流量突然增加了很多，并且超过了园区的承载能力，那么智能运营事件感知就会识别出这个事件，并给运营者发送提醒，并提供相关数据和建议。',
        },
        {
          name: '服务方案智能匹配',
          content: '根据执行角色的特点和能力进行智能匹配。可以通过对各种可能发生的运营事件，如客流高峰、车位不足、设备故障等，进行分类和建模，并与后台已经配置好的服务方案进行知识链接。当有运营事件发生时，可以通过对事件要素的智能感知和分析，快速匹配最合适的服务方案，并根据执行角色的类型、数量、位置、技能等因素，智能地分配任务和资源。例如，如果某个区域出现了车位不足的情况，那么服务方案智能匹配就会匹配出最合适的服务方案，并根据停车场管理人员的位置和空闲情况，智能地分配他们去引导车辆停放。这样可以实现服务方案的智能匹配和分配，提高运营效率和客户满意度。',
        },
        {
          name: '多角色执行过程实时同步',
          content: '利用物联设备和数据采集，为运营者提供多个执行角色之间的实时信息同步和协作的能力。可以通过监控各个执行角色的工作台，收集任务执行情况的数据，并通过可视化展示给运营者和其他相关角色。还可以通过对任务执行过程中出现的问题或变化进行实时通知和反馈，让各个执行角色之间保持信息一致和协调一致。例如，如果某个餐饮店铺在执行任务过程中发现食材不足，那么多角色执行过程实时同步就会及时通知该店铺的供应商，并让供应商尽快补货。同时，还会通知运营者和其他相关店铺，让他们做好应对措施。这样可以实现多角色执行过程的实时同步和协作，提高运营效率和质量。',
        },
        {
          name: '运营复盘+改进提升服务',
          content: '通过对各种运营事件，如客流高峰、车位不足、设备故障等，进行数据收集和处理，并基于运营研判经验，训练事件模型。还可以通过对事件发生前后的数据变化和影响评估，为运营者提供复盘分析报告，并给出改进建议和优化措施。例如，如果某次客流高峰导致了游客排队时间过长，影响了游客体验，那么运营复盘 + 改进提升服务就会对这次事件进行复盘分析，并给出改进建议，如增加剧场场次、优化排队系统、提供更多快捷餐饮等。这样可以实现运营事件的复盘分析和改进提升服务，提高运营水平和客户体验。',
        },

      ],
      jscList: [
        {
          name: '实时全园区客流监测',
          content: '利用物联网、视频监控、大数据等技术，为运营者提供全园区客流量、分布、来源、轨迹等信息的实时监测和分析的能力。可以通过在园区内部署各种传感器和摄像头，收集客流数据，并通过云端平台进行数据处理和可视化展示。还可以通过对客流数据进行挖掘和分析，为运营者提供客流预测、客流分流、客流优化等智能决策支持。例如，如果某个景点出现了客流高峰，那么实时全园区客流监测就会及时通知运营者，并给出分流方案和引导措施，同时也会向游客推送其他景点的信息和优惠券，引导游客合理分散游览。这样可以实现全园区客流的实时监测和分析，提高运营效率和游客体验。',
        },
        {
          name: '未来一周客流车流预测',
          content: '利用历史数据、天气数据、节假日数据等多源数据，为运营者提供未来一周内园区的客流量和车流量的预测和预警的能力。可以通过采用深度学习等先进的机器学习方法，建立客流车流预测模型，并根据实时数据不断更新模型参数。还可以通过对预测结果进行评估和分析，为运营者提供预警信息和应对建议。例如，如果未来一周内某一天预测出园区的客流量或车流量将超过容纳量，那么未来一周客流车流预测就会及时向运营者发出预警，并给出限制入园人数、增加停车场、调整交通路线等应对措施。这样可以实现未来一周客流车流的预测和预警，提高运营水平和安全系数。',
        },
      ],
      cygnList: [
        {
          name: '热力图全局客流态势感知',
          content: '通过在园区内布置多个摄像头，实时监测每个区域的客流量，并通过颜色深浅表示热力程度。还可以通过对热力图上的数据来源进行展示，让运营者知道每个摄像头获取到的人数。例如，如果某个区域的热力图显示为红色，表示该区域客流量很高。',
        },
        {
          name: '智能巡街',
          content: '在后台配置好几条行动动线，并把每个动线上的摄像头串联起来。然后通过服务器超脑判断每个经过的摄像头画面，是否有异常情况，如垃圾、拥堵、安全隐患等，并及时通知运营者或相关部门进行处理。例如，如果某条动线上有一个摄像头画面显示有一堆垃圾堆积在路边，并且影响了游客通行，那么智能巡街就会识别出这个问题，并自动下发任务给清洁部门进行清理。这样可以实现超脑代替人工线下巡查的功能，提高问题发现和解决的效率。',
        },
        {
          name: '智能AI寻人',
          content: '利用人脸识别，多端物联感知等能力，实现景区人员走失事件的及时处理的能力。可以通过在园区内布置多个人脸识别摄像头，实时采集游客的人脸信息，并与后台的人脸库进行匹配。当有游客报告走失事件时，可以通过输入走失者的人脸照片或者其他特征，快速定位走失者的位置，并通过手机、广播、面客屏等多种方式通知走失者和寻找者。例如，如果一对父子在园区内走散了，父亲可以通过手机APP报告走失事件，并上传儿子的照片。智能AI寻人就会在后台搜索儿子的人脸，并找到他在哪个区域，然后通过手机APP给父亲发送儿子的位置，并通过面客屏给儿子发送父亲的位置和联系方式。这样可以实现景区人员走失事件的及时处理，保障游客的安全和体验',
        },
      ],
      xinxiList: [
        {
          name: '园区现场感知能力',
          content: '通过物联网、视频分析、大数据等技术，对园区内的人、车、物、事件等进行实时的数据采集和智能分析，实现对园区的全方位、多维度的感知和认知，为园区的安全、效率、服务等提供支持。例如，在梦廊坊戏剧公园中，通过在各个剧场、商铺、道路、景点等位置安装摄像头、传感器等设备，可以实时监测园区内的客流量、车辆信息、环境参数、异常事件等，并通过云平台进行数据处理和展示。这样，运营者可以及时了解园区的运营状况，调整资源配置，提高服务质量。'
        },
        {
          name: '行业资讯动态同步能力',
          content: '使用互联网、大数据、人工智能等技术，及时获取和分析行业相关的信息和动态，包括政策法规、市场规模、竞争格局、技术创新、用户需求等，为企业的战略决策和业务创新提供参考 。例如，在梦廊坊戏剧公园中，通过关注国家机构媒体、行业协会媒体、行业垂直媒体、上市公司公开信息、证券公司研报、研究咨询机构研报、垂直数据机构媒体、泛财经媒体等渠道，可以获取文化旅游行业的最新资讯和动态 。这样，运营者可以及时了解行业的发展趋势，把握市场机会，优化产品设计。'
        },
      ]
    }
  },
  mounted() {
    ;
  },
  methods: {
    name() {

    },
    maodian(num) {
      this.list.map((item, i) => {
        if (i <= (num - 1)) {
          item.active = true
        } else {
          item.active = false
        }
      })
      var tar = document.getElementById('section' + num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.juese3 {
  height: 100%;

  .jindu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    border: 0px solid #DDDDDD;

    .steps {
      justify-content: center;
    }

    .juli {
      margin-right: 253px;
    }

    .juli2 {
      margin-right: 211px;
    }
  }

  .jueseContent {
    // width: 100%;
    // padding-top: 20px;
    // overflow-y: auto;
    // // border: 1px solid red;
    // height: calc(100% - 88px);

    .startTitle {
      font-size: 20px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }

    .item {
      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
      border-radius: 12px;
      background: #FFFFFF;
    }

    .zhuli {
      width: 100%;
      overflow: hidden;

      .item {
        padding: 32px;
        margin-bottom: 24px;
        background: url('~@/assets/images/mkBj.png') repeat;
        background-size: cover;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-10px);
        }

        .title {
          font-size: 24px;
          font-weight: 600;
          color: #000000;
        }

        .content {
          margin: 21px 0 30px;
          font-size: 18px;
          font-weight: 400;
          color: #000000;
          display: -webkit-box;
          display: -moz-box;
          // white-space: pre-wrap;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
          -webkit-line-clamp: 3;
          /*显示行数  要几行就改几行*/
        }

        .anniu {
          text-align: center;
          line-height: 56px;
          height: 56px;
          cursor: pointer;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #0661FB;
          background: #FFFFFF;
          border: 1px solid rgba(202, 202, 202, 0.67);
          transition: all 0.4s;

          &:hover {
            color: #FFFFFF;
            background: #0661FB;
            border: 1px solid #0661FB;
            box-shadow: 0px 0px 20px 0px rgba(6, 97, 251, 0.3);
          }
        }
      }
    }


  }


}
</style>